<template>
  <div class="page-search">
    <TForm v-bind="formConfig" v-model="formData">
      <template #header>
        <h2>高级检索</h2>
      </template>
      <template #footer>
        <div class="footer-btn">
          <el-button type="primary" icon="el-icon-lollipop" @click="resetBtn"
            >重置</el-button
          >
          <el-button type="primary" icon="el-icon-sugar" @click="queryBtn"
            >查询</el-button
          >
        </div>
      </template>
    </TForm>
  </div>
</template>

<script lang="ts" setup>
import TForm from '@/base-ui/from'
import { ref, defineProps, defineEmits } from 'vue'

const emit = defineEmits(['resetBtnClick', 'queryBtnClick'])
const props = defineProps({
  formConfig: {
    type: Object,
    required: true
  }
})
const formItems = props.formConfig?.formItems ?? []
const formOringinData: any = {}
for (const item of formItems) {
  formOringinData[item.field] = ''
}
const formData = ref(formOringinData)

const resetBtn = () => {
  for (const key in formOringinData) {
    formData.value[`${key}`] = formOringinData[key]
  }
  emit('resetBtnClick')
}

const queryBtn = () => {
  emit('queryBtnClick', formData.value)
}
</script>
<style lang="less" scoped>
.footer-btn {
  text-align: right;
}
</style>
